import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { Modal, Button, Select, Tag } from 'antd';

// import { TagsBlocklProps } from '@/pages/features/user/add/types/interface';

import styles from './index.less';

const TagsBlock: React.FC<any> = (props) => {
  const { dataSource, removeCurrentTag } = props;
  const createTagsDom = useMemo(() => {
    return (
      <>
        {dataSource.map(
          (item: {
            id: React.Key | null | undefined;
            name:
              | boolean
              | React.ReactChild
              | React.ReactFragment
              | React.ReactPortal
              | null
              | undefined;
          }) => (
            <Tag
              key={item.id}
              closable
              onClose={(e) => {
                e.preventDefault();
                removeCurrentTag(item.id);
              }}
            >
              {item.name}
            </Tag>
          ),
        )}
      </>
    );
  }, [dataSource]);

  return (
    <div className={styles.container}>
      <p>当前已选择了{dataSource.length}项</p>
      <div>{createTagsDom}</div>
    </div>
  );
};

export default TagsBlock;
